哈囉大家好~
在實作對資料庫數據進行操作前,還是想要先完成可以從前端接收使用者input的部分開始做,
畢竟之後做小專案也是會用到
所以還是決定要先解決前端的問題XD
之前嘗試使用blade template來撰寫前端,發現會需要在原PHP檔裡寫很多原生JavaScript,需要花很多時間,長篇幅的程式碼也讓易讀性降低。
在官方文檔裡查找了一下,Laravel Livewire前端框架支援開發者可以在不需要寫大量JavaScript程式碼的狀況下,實現動態、互動式的應用程式。
以下簡單整理的Livewire的特色:(BY 官方)
那Livewire具體想要解決使用blade template上什麼樣的問題呢?
大致了解Livewire後,來試試看手感到底好不好XD
livewire在初次啟動Laravel專案時並沒有自動安裝,所以必須另外利用composer安裝套件:
composer require livewire/livewire
接下來就來實際創建一個component試試~
一樣用artisan命令列來創建component-navbar
php artisan make:livewire navbar
執行完成後就可以看到App/livewire目錄裡面有剛剛創建的navbar component(Navbar.php)
初始的程式碼內容如下:
<?php
namespace App\Livewire;
use Livewire\Component;
class Navbar extends Component
{
public function render()
{
return view('livewire.navbar');
}
}
除了這個檔案之外,也會在resources/views/livewire目錄底下找到對應component顯示的畫面:
(navbar.blade.php)
<div>
{{-- Close your eyes. Count to one. That is how long forever feels. --}}
</div>
(官方的語錄也太浪漫了)
接著在navbar.blade.php中撰寫簡單的navbar:
<div>
<h1>{{ $title }}</h1>
<p>姓名: {{ $name }}</p>
<ul>
<li><a href="#hello">哈囉</a></li>
<li><a href="#hi">你好</a></li>
<li><a href="#night">晚安</a></li>
<li><a href="#bye">掰掰</a></li>
</ul>
</div>
這裡用到了兩個參數$title和$name,在這裡用到的變數必須要在Navbar.php裡面定義好:
<?php
namespace App\Livewire;
use Livewire\Component;
class Navbar extends Component
{
public $title = 'IT 鐵人賽 - GOGO';
public $name = '';
public function render()
{
return view('livewire.navbar');
}
}
這裡比較特別的是,我想要讓$name這個變數的值從外面傳進來,所以我把這個component放到另一個blade template中:(main.blade.php)
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<livewire:Navbar name="阿寶"/> #插入component,傳入name參數
<h1>我是內容~</h1>
</body>
</html>
在插入component的時候,要用<livewire:Component名稱 />這樣的形式撰寫!
個人認為livewire的語法和概念都非常像其他前端框架,所以寫起來也比較順手~
畫面上就會看到兩個不同blade拼在一起的畫面:
剛剛瀏覽一下文檔中的其他內容,發現liveware也有支援各個component之間的溝通,event handling⋯⋯等。功能非常強大呢!
當然習慣其他框架的話也可以用inertia這個套件來輔助開發~
因為支援的功能很多,沒有辦法全部學完,只好邊做邊學了XD
今天對於Laravel livewire前端框架的介紹就到這邊簡單結束啦~
感覺在livewire的幫助下後面的小專案可以開發得更有效率
那就明天見了 byebye~